{% extends 'monitor/index.html' %}

{% block  page-title %}

    已监控主机列表
{% endblock %}

{% block page-content %}

  <div class="row">
    <div class="col-lg-12">

        <!--Network Line Chart-->
        <!--===================================================-->
        <div class="panel">
            <div class="panel-heading">
                <div class="panel-control">
                    <button id="demo-panel-network-refresh" data-toggle="panel-overlay" data-target="#demo-panel-network" class="btn"><i class="fa fa-rotate-right"></i></button>
                    <div class="btn-group">
                        <button class="dropdown-toggle btn" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-gear"></i></button>
                        <ul class="dropdown-menu dropdown-menu-right">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                        </ul>
                    </div>
                </div>
                <h3 class="panel-title">主机状态</h3>
            </div>



            <!--Chart information-->
            <div class="panel-body " style="position:relative;z-index:2">
                <div class="row">
                 <table id='host_status_list' class="table table-striped table-hover">
                    <thead>
                        <tr>
                            <td>主机</td>
                            <td>监控服务</td>
                            <td>状态</td>
                            <td>Up time</td>
                            <td>最后更新</td>
                        </tr>
                    </thead>
                    <tbody>
                    {% for host in host_list %}
                        <tr host-id="{{ host.id }}">
                            <td data-type="name"><a href="{% url 'host_detail' host.id %}" > {{ host.name }}({{ host.ip_addr }}) </a> </td>
                            <td data-type="services">
                                {% for service in host.monitor_groups.templates.services.select_related %}
                                    {{ service.name }}
                                {% endfor %}
                            </td>
                            <td data-type="status">loading...</td>
                            <td data-type="uptime">loading...</td>
                            <td data-type="last_update">loading...</td>
                        </tr>
                      {% endfor %}
                    </tbody>
                 </table>
                </div>

            </div>


        </div>
        <!--===================================================-->
        <!--End network line chart-->

    </div>

  </div>

{% endblock %}

{% block bottom-js %}
<script>

setInterval('get_hosts_status()',20000);
function get_hosts_status(){
    $.ajax({
        url:'/api/get_hosts_status/',
        type:'GET',
        success:function(callback){
            //console.log(callback)
            var callback=jQuery.parseJSON(callback);
            $.each(callback,function (i,host) {
                //console.log(host.id)
                var host_html_ele=$("#host_status_list tr[host-id='"+host.id+"']");
                $(host_html_ele).find("td[data-type='status']").text(host.status);
                var status_dic ={
                    'online':'alert-success',
                    'down':'alert-danger',
                    'Unreachable':'alert-danger',
                    'Problem':'alert-warning',
                }
                var status_class = status_dic[host.status];
                $(host_html_ele).find("td[data-type='status']").attr('class',status_class);
            })
        }
    });
}


</script>
{% endblock %}